/**
 * 动态时间组件
 * @author xiaoxujs
 */

import { useEffect, useState } from "react";
import { DynamicsTimeBox } from "./style";

const DynamicsTime = () => {
    const [timeValue, setTimeValue] = useState(''); // 时间
    const [dateValue, setDateValue] = useState(''); // 日期
    const [weekValue, setWeekValue] = useState(''); // 星期
    useEffect(() => {
        const second = setInterval(() => {
            let date = new Date();
            let year = date.getFullYear();
            let month: string | number = date.getMonth() + 1;
            let day: string | number = date.getDate();
            let hours: string | number = date.getHours();
            let minutes: string | number = date.getMinutes();
            let seconds: string | number = date.getSeconds();
            let week = date.getDay();
            let weekArr = ['日', '一', '二', '三', '四', '五', '六'];
            if(hours < 10) {
                hours = '0' + hours;
            }
            if(minutes < 10) {
                minutes = '0' + minutes;
            }
            if(seconds < 10) {
                seconds = '0' + seconds;
            }
            if(month < 10) {
                month = '0' + month;
            }
            if(day < 10) {
                day = '0' + day; 
            }
            setTimeValue(`${hours}:${minutes}:${seconds}`);
            setDateValue(`${year}-${month}-${day}`);
            setWeekValue(`星期${weekArr[week]}`);
        }, 1000)

        return () => {
            clearInterval(second);
        }
    }, [])

    return <DynamicsTimeBox>
        <div className="time_style">{timeValue}</div>
        <div className="date_style">{dateValue}</div>
        <div className="week_style">{weekValue}</div>
    </DynamicsTimeBox>
}

export default DynamicsTime;